﻿<template>
    <div>
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/students' }">学生列表</el-breadcrumb-item>
        <el-breadcrumb-item>学生信息</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 学生列表卡片内容区 -->
        <el-card class="box-card">
            <el-form
                    :inline="true"
                    :model="StudentForm"
                    ref="showStudentFormRef"
                    label-width="100px">
                <el-form-item label="姓名 " prop="name">
                    <span>{{StudentForm.name}}</span>
                </el-form-item>
                <el-form-item label="学号 " prop="stu_id">
                    <span>{{StudentForm.stu_id}}</span>
                </el-form-item>
                <br>
                <el-form-item label="性别 " prop="gender">
                    <span>{{StudentForm.gender === 1 ? '男' : '女'}}</span>
                </el-form-item>
                <el-form-item label="身份证号 " prop="id_card">
                    <span>{{StudentForm.id_card}}</span>
                </el-form-item>
                <el-form-item label="银行卡号 " prop="bank_card_no">
                    <span>{{StudentForm.bank_card_no}}</span>
                </el-form-item>
                <el-form-item label="宿舍号 " prop="dormitory">
                    <span>{{StudentForm.dormitory}}</span>
                </el-form-item>
                <el-form-item label="政治面貌 " prop="political">
                    <span>{{StudentForm.political}}</span>
                </el-form-item>
                <el-form-item label="家庭地址 " prop="home_address">
                    <span>{{StudentForm.home_address}}</span>
                </el-form-item>
                <br>
                <el-form-item label="生日 " prop="birthday">
                    <span>{{StudentForm.birthday | dateFormat}}</span>
                </el-form-item>
                <el-form-item label="邮箱 " prop="email">
                    <span>{{StudentForm.email}}</span>
                </el-form-item>
                <el-form-item label="手机 " prop="mobile">
                    <span>{{StudentForm.mobile}}</span>
                </el-form-item>
                <el-form-item label="QQ " prop="qq">
                    <span>{{StudentForm.qq}}</span>
                </el-form-item>
                <el-form-item label="微信 " prop="we_chat">
                    <span>{{StudentForm.we_chat}}</span>
                </el-form-item>
                <el-form-item label="班级 " prop="class_id">
                    <span>{{StudentForm.class.name}}</span>
                </el-form-item>
                <el-form-item label="专业 ">
                    <el-input readonly v-model="majorMap[StudentForm.class.major_id]" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="父亲 ">
                    <span>{{StudentForm.father_name}}</span>
                </el-form-item>
                <el-form-item label="父亲身份证号 ">
                    <span>{{StudentForm.father_id_card}}</span>
                </el-form-item>
                <el-form-item label="父亲手机号 ">
                    <span>{{StudentForm.father_mobile}}</span>
                </el-form-item>
                <el-form-item label="父亲工作单位 ">
                    <span>{{StudentForm.father_work_uint}}</span>
                </el-form-item>
                <el-form-item label="母亲 ">
                    <span>{{StudentForm.mather_name}}</span>
                </el-form-item>
                <el-form-item label="母亲身份证号 ">
                    <span>{{StudentForm.mather_id_card}}</span>
                </el-form-item>
                <el-form-item label="母亲手机号 ">
                    <span>{{StudentForm.mather_mobile}}</span>
                </el-form-item>
                <el-form-item label="母亲工作单位 ">
                    <span>{{StudentForm.mather_work_uint}}</span>
                </el-form-item>
            </el-form>
        </el-card>
        <span slot="footer" class="dialog-footer" style="float: right">
                <el-button type="primary" @click="goBack">返回</el-button>
        </span>
    </div>
</template>
<script>
export default {
    data(){
        return {
            StudentForm: {
                name: '',
                class: {},
            },
            classList: [],
            majorMap: {}
        }
    },
    created () {
        this.getStudentInfo();
        this.getMajorMap();
    },
    methods:{
        goBack(){
          this.$router.push("/students");
        },
        getMajorName(major_id){
            return this.majorMap[major_id]
        },
        // 获取专业map
        async getMajorMap() {
            const { data: res, status: status } = await this.axios.get('major/getMajorMap')
            if (status !== 200) {
                return this.$message.error('获取班级列表失败！')
            }
            this.majorMap = res.data;
        },
        async getStudentInfo(){
            if (this.$route.params.row !== undefined) {
                this.StudentForm = this.$route.params.row;
            }else {
                const {data: res, status: status} = await this.axios.get("student/getOneStudentInfo", {params: {'id': this.$route.params.id}})
                if (status !== 200) return this.$message.error("获取学生信息失败！");
                this.StudentForm = res.data;
            }
        }
    },
}
</script>
<style lang="less" scoped>
.el-form-item__content span{
    display: inline-block;
    width: 300px;
}
</style>